<template>
  <div>
    <div id="container">
      <div id="pagetop">
      </div>
      <div id="pagebody">
        <div id="bleft"></div>
        <div id="bmiddle">
          <div id="pet_msg">
            <div id="pet_pic">
              <el-image
                  style="width: 100%; height: 230px"
                  :src="PetMessages.picture"></el-image>
            </div>
            <div id="small_msg">
              <div class="all_msg">我的名字：&nbsp&nbsp{{ PetMessages.name }}</div>
              <div class="all_msg">年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp龄： &nbsp{{ PetMessages.age }}个月</div>
              <div class="all_msg">品&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp种：&nbsp&nbsp{{ PetMessages.breed }}</div>
              <div class="all_msg">性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：&nbsp&nbsp{{ PetMessages.sex }}</div>
            </div>
            <div id="adopt_button">
              <el-button type="warning" round v-if="PetMessages.ifAdopt==='未领养'" @click="commitApply">我要领养</el-button>
              <el-button type="danger" disabled v-if="PetMessages.ifAdopt==='已领养'">已被领养</el-button>
            </div>
          </div>
          <div id="pet_information">
            <div style="margin-left: 50px;text-align: left;font-size: 20px">
              <b>详细信息</b>
            </div>
            <hr style="height:1px;border:none;border-top:1px solid #555555;width: 200px"/>
            <div id="pet_information_real">
              &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ PetMessages.introduction }}
            </div>
          </div>
          <div id="pet_comment">
            <div id="AllComment">
              <div id="commentTitle">
                <el-col :span="6"><b>用户评论</b></el-col>
                <el-col :span="14">&nbsp</el-col>
                <el-col :span="3">
                  <el-button type="primary" icon="el-icon-edit" circle @click="editComment"></el-button>
                </el-col>
              </div>
              <div id="authorComment">
                <div id="oneComment" v-for="(commentMsg,index) in this.CommentMessages">
                  <div id="userPic">
                    <el-col :span="12">
                      <div class="demo-basic--circle">
                        <div class="block">
                          <el-avatar :size="50" :src="circleUrl"></el-avatar>
                        </div>
                      </div>
                    </el-col>
                  </div>
                  <div id="userName"><b>{{ dataArr[index] }}</b></div>
                  <div id="userComment">{{ commentMsg.comment }}</div>
                  <div id="commentTime">{{ myTime(commentMsg.createTime) }}</div>
                </div>
              </div>
              <div id="commentPage">
                <el-pagination
                    small
                    layout="prev, pager, next"
                    :current-page.sync="commentCurrent"
                    @current-change="handleCurrentChange"
                    :total=10*this.totalPage>
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div id="bright"></div>
      </div>
      <div id="pagefooter"></div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="40%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="收货人">
          <el-input v-model="localName" style="width: 30%" disabled></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入收货地址"
              v-model="form.toAddress"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="在这里，管理员将会从你的备注中选取是否审核你"
              v-model="form.others"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "specificPet",
  data: function () {
    return {
      localName: localStorage.getItem("myName"),
      petId: 1,
      PetMessages: "",
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      commentCurrent: 1,
      commentSize: 3,
      CommentMessages: "",
      totalPage: 0,
      dataArr: ["用户AAA", "用户BBB", "用户CCC"],
      UserId: 1,
      editVisible: false,
      form: {},
    }
  },
  mounted: function () {
    this.showThisPet()
  },
  methods: {
    commitApply() {
      if (this.$store.state.userId == 0) {
        alert("请去登陆");
        this.$router.replace({path: '/login'});
      } else {
        this.editVisible = true;
      }
    },
    // 保存 修改时候的编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改本页第 ${this.idx + 1} 行成功`);
      axios
          .post(this.$store.state.url+':8412/petApply/addOneApply?userId=' + localStorage.getItem("myId")
              + "&petId=" + this.PetMessages.id + "&username=" + localStorage.getItem("myName")
              + "&toAddress=" + this.form.toAddress + "&others=" + this.form.others)
          .then((data) => {
            console.log("申请领养宠物中。。。")
          })
          .catch((err) => {
            console.log(err);
          });
      this.$message.success('申请成功！');
    },
    showThisPet() {
      if (this.$route.query.petId != null) {
        this.petId = this.$route.query.petId
      }
      axios
          .post(this.$store.state.url+':8412/pet/findPetById?petId=' + this.petId)
          .then((data) => {
            console.log("正在努力获取该宠物信息。。。")
            console.log(data);
            this.PetMessages = data.data.data
            console.log(this.PetMessages)
            this.findComments()
          })
          .catch((err) => {
            console.log(err);
          });
    },
    editComment() {
      this.$prompt('请输入您的评论', '用户评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[a-zA-Z0-9_\u4e00-\u9fa5]+/,
        inputErrorMessage: '评论不符合规范'
      }).then(({value}) => {
        this.addComment(value)
        this.commentCurrent = 1
        this.findComments()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    handleCurrentChange() {
      //this.dataArr.length = 0
      this.findComments()
    },
    myTime(date) {
      let arr = date.split("T");
      let d = arr[0];
      let darr = d.split('-');

      let t = arr[1];
      let tarr = t.split('.000');
      let marr = tarr[0].split(':');

      let dd = parseInt(darr[0]) + "/" + parseInt(darr[1]) + "/" + parseInt(darr[2]) + " " + parseInt(marr[0]) + ":" + parseInt(marr[1]) + ":" + parseInt(marr[2]);
      return dd;
    },
    findComments() {
      axios
          .post(this.$store.state.url+':8412/petComment/getPetComments?petId=' + this.petId + "&current=" + this.commentCurrent + "&size=" + this.commentSize)
          .then((data) => {
            console.log("正在努力获取评论信息。。。")
            console.log(data);
            this.CommentMessages = data.data.data
            this.totalPage = data.data.totalPage
            console.log(this.CommentMessages)
          })
          .catch((err) => {
            console.log(err);
          });
    },
    addComment(value) {
      axios
          .post(this.$store.state.url+':8412/petComment/addOneComment',
              {
                petId: this.petId,
                userId: this.UserId,
                comment: value,
              })
          .then((data) => {
            console.log("正在新增用户评论信息。。。")
            console.log(data);
            alert("成功！")
          })
          .catch((err) => {
            console.log(err);
            alert("失败！")
          });
    }
  }
}
</script>

<style scoped>
#container {
  width: 1000px;
  margin: auto;
}

#pagetop {
  line-height: 100px;
  background-color: aliceblue;
  min-height: 100px;
  border-radius: 25px;
  background-color: rgba(255, 236, 139, 0.5);
}

#pagebody {
  min-height: 600px;
  position: absolute;
  border-radius: 25px;
  background-color: rgba(255, 236, 139, 0.7);
}

#pagefooter {
  position: absolute;
  margin-top: 970px;
  min-height: 100px;
  border: #FFD026 solid 1px;
  background-color: #ff0033;
  clear: both;
}

#bleft {
  background-color: transparent;
  float: left;
  width: 100px;
  min-height: 600px;
}

#bmiddle {
  float: left;
  width: 800px;
  min-height: 600px;
}

#pet_msg {
  min-height: 300px;
}

#pet_pic {
  width: 300px;
  height: 130px;
  background-color: rgba(255, 236, 139, 0.7);
  margin-top: 20px;
  margin-left: 20px;
  float: left;
}

#small_msg {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
  text-align: left;
  font-size: 18px;
}

.all_msg {
  margin-top: 10px;
}

#adopt_button {
  float: left;
  margin-top: 30px;
  margin-left: 370px;
}

#pet_information {
  min-height: 100px;
  font-size: 16px;
}

#pet_information_real {
  text-align: left;
  min-width: 500px;
  max-width: 500px;
  margin-top: 5px;
  line-height: 24px;
  padding-bottom: 30px;
}

#pet_comment {
  min-height: 300px;
}

#commentTitle {
  min-height: 10px;
  font-size: 25px;
}

#authorComment {
  background-color: #ffffcc;
  min-height: 200px;
  border: #42b983 solid 1px;
  margin: 40px 10px;
  border-radius: 15px;
}

#oneComment {
  margin: 20px 10px;
  min-height: 100px;
  border-bottom: 1px solid #000;
}

#commentPage {
  min-height: 40px;
}

#userPic {
  width: 200px;
  margin: 10px;
  text-align: left;
}

#userName {
  text-align: left;
}

#userComment {
  margin-top: 10px;
  text-align: left;
}

#commentTime {
  margin-top: 20px;
  text-align: right;
}

#bright {
  float: left;
  width: 100px;
  background-color: transparent;
  min-height: 600px;
}
</style>